<template>
    <div :class="`${PREFIX}`">
        <p :class="`${PREFIX}-title`">99友婚适合哪些人</p>
        <Cardlist :list="list" />
        <Download :class="`${PREFIX}-download`"/>
    </div>
</template>
<script setup>
const PREFIX = 'page1'
import Cardlist from './components/Cardlist.vue'
import Download from '../components/Download.vue';
const list = [
    {
        img: new URL('../assets/img/aiqingyulangman--2.png', import.meta.url).href,
        title: '爱情与婚姻不能兼容',
        con: '适合于可能有自己喜欢的人，但因各种原因而不能一起走入婚姻的人'
    },
    {
        img: new URL('../assets/img/langman.png', import.meta.url).href,
        title: '没有浪漫感情的需求',
        con: '适合于那些没有浪漫感情需求，或者不打算寻找浪漫伴侣的人'
    },
    {
        img: new URL('../assets/img/aiqingyulangman-.png', import.meta.url).href,
        title: '对婚姻有实际的需求',
        con: '适合于可能因为社会压力、经济、生活或者其他原因，需要有一个婚姻关系的人'
    },
    {
        img: new URL('../assets/img/aiqingyulangman--3.png', import.meta.url).href,
        title: '对婚姻有特殊的看法',
        con: '一些人可能认为婚姻应该基于友谊和互助，而不是浪漫感情'
    }
]
</script>
<style lang="less">
.page1 {
    width: 1400px;
    height: 100%;
    margin: 0 auto;
    padding: 85px 91px 72px 110px;
    box-sizing: border-box;

    &-title {
        height: 50px;
        color: #666666;
        text-align: center;
        font-size: 42px;
        line-height: 50px;
        margin-bottom: 110px;
    }
    &-download {
        margin-top: 60px;
    }
}
</style>